<template>
  <div class="password pages-box">
<!--    顶部-->
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>修改密码
    </div>
<!--    整体-->
    <div class="whole">
      <van-form @submit="submit">
      <div class="content">
          <van-field
              v-model="pwdForm.oldPwd"
              class="old-password"
              size="large"
              type="password"
              name="oldPassword"
              label="旧密码"
              :rules="[{ required: true, message: '请输入您的旧密码' }]"
              input-align="left"/>
          <van-field
              v-model="userPwd"
              class="old-password"
              size="large"
              type="password"
              name="newPassword"
              label="新密码"
              :rules="[{ required: true, message: '请输入您的新密码' }]"
              input-align="left"/>
          <van-field
              v-model="confirmPwd"
              class="old-password"
              size="large"
              type="password"
              name="exactlyPassword"
              label="确认密码"
              :rules="[{ required: true, message: '请再次输入您的新密码' }]"
              input-align="left"/>
      </div>
        <div class="preservation">
          <van-button>保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import footerNav from "@/components/footerNav";
import {changePwd} from "../api/password";
export default {
  name: "Change-password",
  components: {
    footerNav,
  },
  data() {
    return {
      pwdForm: {
        // 旧密码
        oldPwd: '',
        //  新密码
        userPwd: ''
      },
      // 新密码
      userPwd: '',
      // 确认新密码
      confirmPwd: ''
    }
  },
  methods:{
    submit() {
      if(this.userPwd !== this.confirmPwd){
        this.$notify('请输入相同的新密码');
        this.userPwd =null
        this.confirmPwd =null
        this.pwdForm.oldPwd =null
      }else{
        this.pwdForm.userPwd = this.userPwd
        changePwd(this.pwdForm).then(res=>{
          this.$toast(res.msg);
          this.$router.push({
            path: '/About',
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.password{
  flex: 1;
  overflow: auto;
  background: #f6f7f8;
  .whole{
    padding: 16px;
    .content{
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 15px 25px 15px;
      .old-password{
        padding: 25px 0 5px 0;
        border-bottom: 1px solid #ebedf0;
        /deep/.van-cell__title{
          padding-left: 10px;
        }
        /deep/.van-field__label{
          width: 5em;
          margin-right: 10px;
        }
        .van-cell{
          padding: 0;

        }
      }
    }
    .preservation{
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 20px 0;
      /deep/.van-button{
        width: 90%;
        color: white;
        border-radius: 20px;
        background: linear-gradient(133deg, #fd7895 36%, #ffcdcd 100%);
      }
    }
  }
}
</style>
